<template>
  <div class="app-container home">
    <el-form
      :model="addInformation"
      ref="ruleForm"
      class="demo-dynamic"
      label-width="140px"
    >
      <el-form-item
        label="编码规则名称："
        :rules="{
          required: true,
          message: '编码规则名称不能为空！',
          trigger: 'change',
        }"
        prop="codingruleName"
      >
        <el-input
          v-model="addInformation.codingruleName"
          style="width: 200px"
          placeholder="请输入编码规则名称"
        ></el-input>
      </el-form-item>
      <div class="operationButton">
        <el-button type="primary" class="save" @click="handleSave"
          >保存</el-button
        >
        <el-button plain class="close" @click="handleClose">返回</el-button>
      </div>
    </el-form>
    <table-panel
      ref="tablePanel"
      align="left"
      :table-data="tableData"
      :columns="columns"
      :pagination="false"
      @selection-change="handleSelect"
    >
    </table-panel>
    <div class="add-btn">
      <el-button @click="handleAdd">+</el-button>
    </div>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import {
  addCodingRule,
  detailsList,
  editCodingRule
} from "@/api/systemManage/runningWaterCoding/codingRulesSet.js";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
  },
  data() {
    return {
      addInformation: {
        codingruleName: "",
      },
      columns: [
        {
          type: "checkout",
        },
        {
          field: "serialNo",
          label: "分段序号",
          disabled: true,
          index: true,
        },
        {
          field: "serialDesc",
          label: "分段描述",
          type: "input",
        },
        {
          field: "serialType",
          label: "编码类型",
          type: "select",
          options: [
            {
              label: "日期",
              value: '1',
            },
            {
              label: "字符",
              value: '2',
            },
            {
              label: "流水号",
              value: '3',
            },
          ],
        },
        {
          field: "serialData",
          label: "数据格式",
          type: "input",
        },
        {
          field: "serialSize",
          label: "位数",
          type: "input",
        },
      ],
      tableData: [
        {
          serialNo: 1,
          serialDesc: "",
          serialType: "",
          serialData: "",
          serialSize: "",
        },
      ],
      serialNo: 1,
      selectTable: [],
    };
  },
  mounted() {
    if (this.$route.query.id) {
      detailsList(this.$route.query.id).then((res) => {
        this.$nextTick(() => {
          this.$refs.tablePanel.dataList = res.data.codingruleContent;
          this.serialNo = res.data.codingruleContent.length;
          this.addInformation.codingruleName = res.data.codingruleName;
        });
      });
    }
  },
  methods: {
    // 表格选择框
    handleSelect(row) {
      this.selectTable = row;
    },
    handleSave() {
      if (this.selectTable.length === 0) {
        return this.$message.warning("请选择数据！");
      }
      const api = this.$route.query.id ? editCodingRule : addCodingRule;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = {
            codingruleContent: this.selectTable,
            codingruleName: this.addInformation.codingruleName,
            codingruleId: this.$route.query.id ? this.$route.query.id : ''
          };
          api(params)
            .then((res) => {
              this.$message.success("操作成功！");
              this.$router.push(
                "/systemManage/runningWaterCoding/codingRulesSet"
              );
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.serialNo = 1;
      this.$router.push("/systemManage/runningWaterCoding/codingRulesSet");
    },
    handleAdd() {
      this.$refs.tablePanel.dataList.push({
        serialNo: ++this.serialNo,
        serialDesc: "",
        serialType: "",
        serialData: "",
        serialSize: "",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  border-bottom: 1px solid #efefef;
}
::v-deep .el-form-item__label {
  font-size: 16px;
  color: #333333e6;
}
.el-form-item {
  display: inline-block;
}
.operationButton {
  float: right;
  button {
    width: 80px;
    height: 40px;
  }
  .save {
    background: #971111;
    color: #fff;
    border-color: #971111;
  }
  .close {
    border-color: #971111;
    color: #971111;
  }
}
.add-btn {
  text-align: center;
  button {
    padding: 0;
    font-size: 24px;
    width: 56px;
    height: 32px;
    background: #971111;
    color: #fff;
    border: none;
    line-height: 32px;
  }
}
</style>